@{
    ViewData["Title"] = "静态文件测试";
    Layout = "_Layout";
}

<div class="layui-container-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <h3>静态文件加载测试</h3>
                </div>
                <div class="layui-card-body">
                    <h4>CSS文件测试</h4>
                    <div id="cssTest" style="padding: 10px; background-color: #f8f8f8; border: 1px solid #e6e6e6; margin-bottom: 20px;">
                        <p><strong>site.css加载状态:</strong> <span id="siteCssStatus">检查中...</span></p>
                        <p><strong>Layui CSS加载状态:</strong> <span id="layuiCssStatus">检查中...</span></p>
                        <p><strong>当前页面样式:</strong> <span id="currentStyle">检查中...</span></p>
                        <p><strong>Layout使用状态:</strong> <span id="layoutStatus">检查中...</span></p>
                    </div>

                    <h4>按钮样式测试</h4>
                    <div class="layui-btn-container" style="margin-bottom: 20px;">
                        <button class="layui-btn">默认按钮</button>
                        <button class="layui-btn layui-btn-primary">主要按钮</button>
                        <button class="layui-btn layui-btn-normal">正常按钮</button>
                        <button class="layui-btn layui-btn-warm">暖色按钮</button>
                        <button class="layui-btn layui-btn-danger">危险按钮</button>
                    </div>

                    <h4>手动CSS测试</h4>
                    <div style="margin-bottom: 20px;">
                        <button id="testButton1" style="background-color: #1E9FFF; color: white; padding: 10px 20px; border: none; border-radius: 4px; margin-right: 10px;">蓝色按钮</button>
                        <button id="testButton2" style="background-color: #FFB800; color: white; padding: 10px 20px; border: none; border-radius: 4px; margin-right: 10px;">橙色按钮</button>
                        <button id="testButton3" style="background-color: #FF5722; color: white; padding: 10px 20px; border: none; border-radius: 4px;">红色按钮</button>
                    </div>

                    <h4>网络请求测试</h4>
                    <div id="networkTest" style="padding: 10px; background-color: #f0f8ff; border: 1px solid #b0d4f1; margin-bottom: 20px;">
                        <p><strong>site.css请求:</strong> <span id="siteCssRequest">测试中...</span></p>
                        <p><strong>Layui CSS请求:</strong> <span id="layuiCssRequest">测试中...</span></p>
                    </div>

                    <h4>测试结果</h4>
                    <div id="testResult" style="padding: 10px; background-color: #f0f8ff; border: 1px solid #b0d4f1; display: none;">
                        <p id="resultText"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        $(document).ready(function() {
            console.log('静态文件测试页面加载完成');
            
            // 检查CSS文件加载
            checkCssFiles();
            
            // 测试网络请求
            testNetworkRequests();
            
            // 绑定按钮事件
            bindButtonEvents();
        });

        function checkCssFiles() {
            // 检查Layout使用状态
            const hasLayout = $('.layui-layout-admin').length > 0;
            if (hasLayout) {
                $('#layoutStatus').text('已使用Layout').css('color', 'green');
                console.log('Layout已正确加载');
            } else {
                $('#layoutStatus').text('未使用Layout').css('color', 'red');
                console.error('Layout未加载');
            }
            
            // 检查site.css
            const siteCss = $('link[href*="site.css"]');
            if (siteCss.length > 0) {
                $('#siteCssStatus').text('已加载').css('color', 'green');
                console.log('site.css已加载');
            } else {
                $('#siteCssStatus').text('未加载').css('color', 'red');
                console.error('site.css未加载');
            }
            
            // 检查Layui CSS
            const layuiCss = $('link[href*="layui"]');
            if (layuiCss.length > 0) {
                $('#layuiCssStatus').text('已加载').css('color', 'green');
                console.log('Layui CSS已加载');
            } else {
                $('#layuiCssStatus').text('未加载').css('color', 'red');
                console.error('Layui CSS未加载');
            }
            
            // 检查当前页面样式
            const testButton = $('.layui-btn').first();
            if (testButton.length > 0) {
                const computedStyle = window.getComputedStyle(testButton[0]);
                const backgroundColor = computedStyle.backgroundColor;
                const color = computedStyle.color;
                const height = computedStyle.height;
                $('#currentStyle').text('背景色: ' + backgroundColor + ', 文字色: ' + color + ', 高度: ' + height);
                console.log('当前按钮样式:', {backgroundColor, color, height});
            }
        }

        function testNetworkRequests() {
            // 测试site.css请求
            $.ajax({
                url: '/css/site.css',
                method: 'GET',
                success: function(data, status, xhr) {
                    $('#siteCssRequest').text('成功 (状态码: ' + xhr.status + ')').css('color', 'green');
                    console.log('site.css请求成功');
                },
                error: function(xhr, status, error) {
                    $('#siteCssRequest').text('失败 (状态码: ' + xhr.status + ')').css('color', 'red');
                    console.error('site.css请求失败:', xhr.status, error);
                }
            });
            
            // 测试Layui CSS请求
            $.ajax({
                url: 'https://unpkg.com/layui@2.8.18/dist/css/layui.css',
                method: 'GET',
                success: function(data, status, xhr) {
                    $('#layuiCssRequest').text('成功 (状态码: ' + xhr.status + ')').css('color', 'green');
                    console.log('Layui CSS请求成功');
                },
                error: function(xhr, status, error) {
                    $('#layuiCssRequest').text('失败 (状态码: ' + xhr.status + ')').css('color', 'red');
                    console.error('Layui CSS请求失败:', xhr.status, error);
                }
            });
        }

        function bindButtonEvents() {
            // Layui按钮测试
            $('.layui-btn').on('click', function() {
                const buttonText = $(this).text().trim();
                const buttonClass = $(this).attr('class');
                showResult('点击了Layui按钮: ' + buttonText + '<br>类名: ' + buttonClass);
            });
            
            // 手动样式按钮测试
            $('#testButton1').on('click', function() {
                showResult('点击了蓝色按钮 (手动样式)');
            });
            
            $('#testButton2').on('click', function() {
                showResult('点击了橙色按钮 (手动样式)');
            });
            
            $('#testButton3').on('click', function() {
                showResult('点击了红色按钮 (手动样式)');
            });
        }

        function showResult(text) {
            $('#resultText').html(text);
            $('#testResult').show();
            
            setTimeout(function() {
                $('#testResult').hide();
            }, 3000);
        }
    </script>
} 